<template>
	<view class="container">
		<view class="title">添加以下设备</view>
		<image class="device-img" :src="devicePic" mode="heightFix" />
		<view class="form">
			<view class="form-item">
				<view class="label">设备名称</view>
				<view class="input">{{ noteName }}</view>
			</view>
			<view class="form-item">
				<view class="label">绑定用户</view>
				<view class="input">{{ userName }}</view>
			</view>
		</view>
		<BaseButton class="btn-wrapper" shape="circle" text="完成" @click="onBindDevice" />
	</view>
</template>

<script>
	import BaseButton from "@/components/base-button/index.vue";
	import BaseModal from "@/components/base-modal/index.vue";
	import StorageUtils from "@/utils/StorageUtils.js";
	import CacheConfig from "@/config/CacheConfig";
	import * as LoginApi from "@/api/login/index.js";
	import * as DeviceApi from "@/api/device/index.js";
	import {
		showInfo
	} from "@/utils/ToastUtils";

	export default {
		data() {
			return {
				deviceName: "",
				devicePic: "",
				noteName: "",
				userName: "",
			};
		},
		components: {
			BaseButton,
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				const { 
					deviceName,
					devicePic,
					productKey,
					noteName
				} = this.$addDeviceService.device;
				this.deviceName = deviceName;
				this.devicePic = devicePic;
				this.productKey = productKey;
				this.noteName = noteName;
				const homeId = StorageUtils.get("homeId");
				LoginApi.homeMembers({homeId}).then(res => {
					console.log("homeMembers success", res);
					const memberList = res.obj || [];
					const member = memberList.find(v => v.uuid == this.$addDeviceService.uuid);
					// console.log("member", member);
					this.userName = member.remark || member.nickName || "未知用户";
				})
			},
			onBindDevice() {
				const param = {
					deviceName: this.$addDeviceService.device.deviceName,
					deviceType: this.$addDeviceService.device.deviceType,
					uuid: this.$addDeviceService.uuid,
				};
				console.log("onBindDevice param", param);
				DeviceApi.bindDevice(param).then(res => {
					// showInfo("绑定成功");
					uni.navigateTo({
						url:'/pages/addDevice/bindDeviceSuccess'
					})
				}).catch(err => {
					console.log("bindDevice error", err);
					showInfo("绑定失败");
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #FFFFFF;

		.title {
			font-size: 30rpx;
			color: #010101;
			margin-bottom: 20rpx;
			margin-left: 30rpx;
			padding-top: 20rpx;
		}

		.device-img {
			width: 100rpx;
			height: 100rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
		}

		.form {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;

			.form-item {
				margin-bottom: 50rpx;

				.label {
					font-size: 30rpx;
					color: #010101;
					margin-bottom: 20rpx;
				}

				.input {
					width: 700rpx;
					height: 73rpx;
					background: #F2F3F5;
					color: #010101;
					font-size: 30rpx;
					border-radius: 10rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}

			}
		}

		.btn-wrapper {
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
		}

	}
</style>
